<template>
  <PageWrapper dense>
    <!-- 表格组件 -->
    <BasicTable @register="registerTable">
      <!--插槽toolbar 为表格组件的功能插槽 -->
      <template #toolbar>
        <a-button type="primary" @click="handleEdit">{{ t('common.add') }}</a-button>
        <!-- 批量操作组件 用于对表格数据做批量操作  batchData：可操作数据源 actions：按钮列表 -->
        <BatchButton
          :batchData="getSelectRowKeys"
          :actions="[
            {
              // 图标 ant-design代表 ant-design图标库   delete-outlined为图标名
              icon: 'ant-design:delete-outlined',
              // 显示的标签名
              label: t('common.delText'),
              // 确认提示框文本
              confirmText: t('common.isDel'),
              // 点击事件
              onClick: handleDelete,
              // 是否被禁用
              disabled: isDisabled('del', getSelectRows()),
            },
          ]"
        />
      </template>
      <!-- 表格列插槽 bodyCell-->
      <template #bodyCell="{ column, record }">
        <!-- 表格操作列默认key为action -->
        <template v-if="column.key === 'action'">
          <!-- 表格行操作组件 -->
          <TableAction
            :actions="[
              {
                icon: 'ant-design:branches-outlined',
                tooltip: '追踪',
                onClick: viewTracker.bind(null, record.BillId),
              },
              {
                icon: 'ant-design:edit-outlined',
                tooltip: t('common.edit'),
                onClick: handleEdit.bind(null, record.BillId, false),
                disabled: isDisabled('del', record),
              },
              {
                // 图标
                icon: 'ant-design:delete-outlined',
                // 颜色状态
                color: 'error',
                // 悬浮显示内容
                tooltip: t('common.delText'),
                // 气泡确认提示
                popConfirm: {
                  // 确认内容
                  title: t('common.isDel'),
                  // 弹出位置
                  placement: 'left',
                  // 确认回调
                  confirm: handleDelete.bind(null, [record.BillId]),
                },
                disabled: isDisabled('del', record),
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
  </PageWrapper>
</template>
<!-- name为当前页面的标识 可用于页面设置缓存 -->
<script lang="ts" setup name="Sa_Order">
  // ----------------------------- 第三方引入 -----------------------------

  // ----------------------------- hooks引入 -----------------------------
  // 包含路由功能，tab操作的hook
  import { useAppRouter } from '/~/hooks/help/useAppRouter';
  // 生成表格的hook 需要与 BasicTable组件 搭配使用
  import { useAppTable } from '/~/hooks/help/useAppTable';
  // 多语言转换hook
  import { useI18n } from '/@/hooks/web/useI18n';
  // 单据状态hook
  import { useBillState } from '/~/hooks/work/useBillState';
  // ----------------------------- 组件引入 -----------------------------
  // 表格组件 与 表格操作列组件
  import { BasicTable, TableAction } from '/@/components/Table';
  // 包裹组件
  import { PageWrapper } from '/@/components/Page';
  // 数据批量操作组件
  import { BatchButton } from '/~/components/BatchButton';
  // ----------------------------- 其他引入 -----------------------------
  // 接口模块
  import OrderApi from '/@/api/work/sale/order';
  // 表格和表单的结构配置
  import { tableColumns, formSchemas } from './schema.data';
  //----------------------------- 变量声明区 -----------------------------

  // ----------------------------- hooks使用区 -----------------------------
  const { push } = useAppRouter();
  // isDisabled 可以根据单据状态，所要执行的操作 ，来判定当前是否需要禁用
  const { isDisabled } = useBillState();
  // 多语言转
  const { t } = useI18n();
  // registerTable 表格组件注册函数
  // reload 重载表格数据,
  // getSelectRowKeys获取已选择的数据行的key集合,
  // getSelectRows 获取已选择的数据行的集合
  const [registerTable, { reload, getSelectRowKeys, getSelectRows }] = useAppTable({
    // 列表接口api
    api: OrderApi.api_list,
    // 表格标题
    title: t('routes.menu.Sa_Order'),
    // 表格列配置
    columns: tableColumns,
    // 搜索表单配置
    formConfig: {
      schemas: formSchemas,
    },
    // 可选框
    rowSelection: { type: 'checkbox' },
    // action操作列配置
    actionColumn: {
      width: 120,
    },
  });
  // ----------------------------- 钩子函数区 -----------------------------
  // onmounted...

  //  ----------------------------- 自定义方法区 -----------------------------
  // 删除单据
  async function handleDelete(Ids: string[]) {
    console.log(Ids);
    // await OrderApi.api_delete({ Ids });
    reload();
  }
  // 跳转编辑页
  /**
   * @description: 跳转到 新增 或者 编辑页
   * @param {*} Id 单据ID
   * @param {*} isNew 是否是新增
   * @return {*}
   */
  function handleEdit(Id, isNew = true) {
    // query携带 Id则是编辑  不携带则是新增
    push({
      name: 'Sa_Order_Edit',
      query: isNew
        ? {}
        : {
            Id,
          },
    });
  }
  function viewTracker(Id) {
    // query携带 Id则是编辑  不携带则是新增
    push({
      name: 'Sa_Order_Tracker',
      query: { Id },
    });
  }
</script>
